<template>
    <div>
        <page-header-com>物流详情</page-header-com>
        <div class="map">
            <img src="../assets/images/mapImg.svg" alt="" />
        </div>

        <div class="info">
            <div class="title">
                <nut-icon size="12px" name="JD"></nut-icon> 京东物流
            </div>
            <div class="number">
                <span class="danhao">单号：1079956651236</span>
                <div class="posi">距离：<span>940 km</span></div>
            </div>
            <!-- 物流信息内容 -->
            <div
                :class="{ scroll_box: true, show: isShow }"
                @scroll="scroll"
                @click="showDetail"
            >
                <div
                    class="info_item"
                    v-for="(item, index) in logisticsList"
                    :key="index"
                >
                    <div class="info_item_detail">
                        <img
                            v-if="index == 0"
                            src="../assets/font/wuliuInfo_active.svg"
                            alt=""
                        />
                        <img v-else src="../assets/font/wuliuInfo.svg" alt="" />
                        <i>{{ item.context }}</i>
                    </div>
                    <div class="info_item_date">{{ item.time }}</div>
                </div>
                <div class="nomore">没有更多了哦</div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "logisticsDetailsView",
    data() {
        return {
            isShow: false,
            // 物流信息
            logisticsList: "",
        };
    },
    methods: {
        // 滚动伸缩盒子
        scroll(e) {
            let flag = [...e.target.classList].includes("show");
            // 判断是否已存在 show 类名
            if (flag) {
                if (e.target.scrollTop == 0) {
                    this.isShow = false;
                }
            } else {
                this.isShow = true;
            }
        },
        showDetail() {
            this.isShow = !this.isShow;
        },
    },
    mounted() {
        this.logisticsList = JSON.parse(this.$route.params.logistics);
        console.log(this.logisticsList);
    },
};
</script>

<style lang="scss" scoped>
.map {
    height: 38.933vw;

    img {
        width: 100%;
        height: 100%;
    }
}
.info {
    position: fixed;
    bottom: 0;
    width: 100vw;
    background-color: transparent;

    .title {
        position: absolute;
        left: 0;
        width: 29.333vw;
        height: 16vw;
        padding-top: 2.133vw;
        border-radius: 8vw;
        background-color: #fff;
        text-align: center;
        font-size: 3.733vw;
        font-weight: 700;
        z-index: -99;
    }
    .number {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background-color: #fff;
        height: 13.333vw;
        margin-top: 8vw;
        padding: 0 4.267vw;
        .danhao {
            color: #999;
            font-size: 3.733vw;
        }
        .posi {
            font-size: 3.733vw;
            span {
                color: #921b31;
            }
        }
    }
    .scroll_box {
        width: 100%;
        height: 109.333vw;
        overflow: auto;
        transition: all 0.3s;
        background-color: #fff;
        .info_item {
            box-sizing: border-box;
            width: 93.333vw;
            margin: 0 auto;
            padding: 2.667vw 0;
            border-top: 0.267vw solid #f2f2f2;
            font-size: 3.733vw;
            .info_item_detail {
                display: flex;
                align-items: center;
                img {
                    width: 4.267vw;
                    height: 4.267vw;
                    margin-right: 2.667vw;
                }
                span {
                    font-weight: 700;
                }
                i {
                    color: #999;
                }
            }
        }
        .info_item_date {
            padding-left: 6.933vw;
            color: #999;
            font-size: 3.2vw;
        }
        .nomore {
            height: 12.267vw;
            font-size: 3.733vw;
            font-weight: 700;
            color: #8e7e6f;
            text-align: center;
        }
    }
    .show {
        height: 133.333vw;
    }
}
</style>